<!--  -->
<template>
  <div class="city">
      <div class="city_header">
          <span>选择城市</span><span class="s2" @click="tohome()">X</span>

      </div>
      <!-- 1111111 -->
      <div>
        <p class="v_title">定位/附近的城市</p>
      <div class="vicinity">
          <div class="city_list1">
              北京市
          </div>
      </div>
      </div>
      <!-- 2222222222 -->
      <div>
        <p class="v_title">已开通周边游站点</p>
      <div class="vicinity">
          <div class="city_list1" v-for="(item, index) in sites" :key="index" @click="changecity(item.name)">
              {{item.name}}
          </div>
      </div>
      </div>
      <!-- 333333333333 -->
      <div>
        <p class="v_title">热门玩乐城市</p>
      <div class="vicinity">
          <div class="city_list1" v-for="(item, index) in citys" :key="index">
               {{item.name}}
          </div>
      </div>
      </div>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      sites: "",
      citys: "",
      
    };
  },
  methods: {
    tohome() {
      this.$router.push("/");
    },
    changecity(itemName){
        this.$router.push("/");
        console.log(itemName)
        this.cName(itemName)
    },
    ...mapMutations(["cName"]),
  },
  mounted() {
    this.$http.get("/api/city.json").then(res => {
      this.sites = res.data.sites;
      this.citys = res.data.citys;
      console.log(res.data);
    });
  }
};
</script>
<style scoped lang="scss">
.city_list1 {
  margin-left: 0;
  width: 75px;
  height: 31px;
  border: solid 0.5px #999;
  margin-top: 0.2666666rem;
  border-radius: 6px;
  line-height: 31px;
  text-align: center;
  margin-left: 8px;
}
.city {
  width: 100%;
  height: 100%;
  .city_header {
    width: 100%;
    height: 50px;
    background: #fed101;
    text-align: center;
    position: relative;
    font-size: 16px;
    line-height: 50px;
    .s2 {
      position: absolute;
      right: 15px;
      font-weight: bold;
      font-size: 20px;
    }
  }
  .v_title {
    width: 90%;
    margin-top: 0.4666666rem;
    font-size: 14px;
    color: #999;
    padding-left: 5%;
  }
  .vicinity {
    width: 90%;
    height: auto;
    padding: 0 5%;
    font-size: 14px;
    color: #999;
    display: flex;
    flex-wrap: wrap;
    .city_list {
      width: 75px;
      height: 31px;
      border: solid 0.5px #999;
      margin-top: 0.2666666rem;
      border-radius: 6px;
      line-height: 31px;
      text-align: center;
      margin-left: 0.2666666rem;
    }
  }
}
</style>